<template>
  <div class="module7">
    <div class="module7-content">
      <Wmodule title="产量趋势" class="clqs-module">
        <ClChartBar :sourceData="yieldMap" />
      </Wmodule>
      <Wmodule title="销量趋势" class="clqs-module">
        <ClChartBar :sourceData="salesMap" />
      </Wmodule>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, toRaw } from 'vue'
import Wmodule from '@/components/wmodule/index.vue'
import ClChartBar from '../chartmodule/clChartbar.vue'
import TurDeatil from '../chartmodule/turDeatil.vue'
import CqjcChart from '../chartmodule/cqjcChart.vue'

import imgUrl2 from '@/assets/img/2.png'
import imgUrl3 from '@/assets/img/3.png'
import imgUrl4 from '@/assets/img/4.png'
import imgUrl5 from '@/assets/img/5.png'
import imgUrl6 from '@/assets/img/6.png'
import imgUrl7 from '@/assets/img/7.png'
import imgUrl8 from '@/assets/img/8.png'
import imgUrl9 from '@/assets/img/9.png'
import imgUrl10 from '@/assets/img/10.png'
import imgUrl11 from '@/assets/img/11.png'
import imgUrl12 from '@/assets/img/12.png'
import imgUrl22 from '@/assets/img/22.png'
import imgUrl28 from '@/assets/img/28.png'

const props = defineProps({
  sourceData: {
    type: Object,
    default: () => {}
  }
})

const dpInforOptions = [
  {
    name: '农业主体',
    value: 0,
    icon: imgUrl2,
    key: 'personLiable'
  },
  {
    name: '大棚面积',
    value: 0,
    unit: 'm²',
    icon: imgUrl3,
    key: 'area'
  },
  {
    name: '设备数量',
    value: 0,
    icon: imgUrl28,
    key: 'deviceCount'
  },
  {
    name: '作物品种',
    value: 0,
    icon: imgUrl22,
    key: 'cropCount'
  }
]
const dpInfor = ref(dpInforOptions)

const hjDataOptions = [
  {
    name: '温度',
    value: '',
    unit: 'C°',
    icon: imgUrl11
  },
  {
    name: '湿度',
    value: '',
    unit: '%',
    icon: imgUrl10
  },
  {
    name: '风向',
    value: '',
    icon: imgUrl8
  },
  {
    name: '风速',
    value: '',
    unit: 'm/s',
    icon: imgUrl7
  },
  {
    name: '大气压',
    value: '',
    unit: 'kpa',
    icon: imgUrl6
  },
  {
    name: '降雨量',
    value: '',
    unit: 'mm',
    icon: imgUrl9
  }
]
const hjData = ref(hjDataOptions)

const baozilist = ref([])

const turData = ref([])

const yieldMap = ref({})

const salesMap = ref([])

const wormDevices = ref([])

watch(
  () => props.sourceData,
  (newValue) => {
    const _newValue = toRaw(newValue)
    const _keys = Object.keys(_newValue)
    if (_keys.length > 0) {
      // 有数据
      dpInfor.value = dpInforOptions.map((item) => {
        return {
          ...item,
          value: _newValue[item.key] || 0
        }
      })
      // 环境气象
      const _metMappingVos = _newValue.metMappingVos

      const _hjData = hjDataOptions.map((item) => {
        const row = _metMappingVos.find(
          (item2) => item2.deviceItemName === item.name
        )
        if (row) {
          const _metData = row.metData || row.soilData || {}
          if (item.name === '湿度') {
            return {
              ...item,
              value: _metData.humValueStr,
              unit: _metData.humUnit
            }
          }
          return {
            ...item,
            value: _metData.temValueStr,
            unit: item.name != '风向' ? _metData.temUnit : ''
          }
        } else {
          return item
        }
      })
      hjData.value = _hjData

      baozilist.value = _newValue.sporeStatusVos || []

      turData.value = _newValue.soilMappingVos || []

      yieldMap.value = _newValue.yieldMap || {}
      let _salesMap = _newValue.salesMap || {}
      console.log('_salesMap', _salesMap)
      for (let i in _salesMap) {
        console.log('i', i)
        const mml = _salesMap[i].map((item) => {
          return {
            ...item,
            cropWeight: item.salesWeight
          }
        })
        _salesMap[i] = mml
      }
      console.log('_salesMap', _salesMap)
      salesMap.value = _salesMap
      if (_newValue.wormDevices && _newValue.wormDevices[0]) {
        wormDevices.value = _newValue.wormDevices[0].wornData || []
      }
    } else {
      dpInfor.value = dpInforOptions
      hjData.value = hjDataOptions
      baozilist.value = []
      turData.value = []
      salesMap.value = {}
      yieldMap.value = {}
      wormDevices.value = []
    }
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.module7 {
  width: 100%;
  height: 100%;
  padding-top: 16px;
  box-sizing: border-box;
  .module7-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    height: 100%;
    gap: 10px;
    padding: 0px 16px;
    box-sizing: border-box;
    .clqs-module {
      flex: 1;
      padding-top: 0px;
    }
  }
}
</style>
